<template>
  <div class="pc">
    <div class="lpzt">
      <div class="openpanel" @click="toggle">
        云台控制
        <el-icon class="icon-title" :class="{ active: isopen }"
          ><DArrowRight
        /></el-icon>
      </div>
      <div class="ptz" v-if="isopen">
        <div class="yuan"></div>
        <div class="xyuan"></div>
        <div class="btleft" @mousedown="toptz('LEFT')" @mouseup="toptz('STOP')">
          <el-icon :size="40">
            <CaretLeft />
          </el-icon>
        </div>
        <div class="bttop" @mousedown="toptz('UP')" @mouseup="toptz('STOP')">
          <el-icon :size="40">
            <CaretLeft />
          </el-icon>
        </div>
        <div
          class="btright"
          @mousedown="toptz('RIGHT')"
          @mouseup="toptz('STOP')"
        >
          <el-icon :size="40">
            <CaretLeft />
          </el-icon>
        </div>
        <div
          class="btbottom"
          @mousedown="toptz('DOWN')"
          @mouseup="toptz('STOP')"
        >
          <el-icon :size="40">
            <CaretLeft />
          </el-icon>
        </div>
        <div
          class="btleftt"
          @mousedown="toptz('LEFT_UP')"
          @mouseup="toptz('STOP')"
        >
          <el-icon :size="30">
            <ArrowLeftBold />
          </el-icon>
        </div>
        <div
          class="btleftb"
          @mousedown="toptz('LEFT_DOWN')"
          @mouseup="toptz('STOP')"
        >
          <el-icon :size="30">
            <ArrowLeftBold />
          </el-icon>
        </div>
        <div
          class="btrightt"
          @mousedown="toptz('RIGHT_UP')"
          @mouseup="toptz('STOP')"
        >
          <el-icon :size="30">
            <ArrowLeftBold />
          </el-icon>
        </div>
        <div
          class="btrightb"
          @mousedown="toptz('RIGHT_DOWN')"
          @mouseup="toptz('STOP')"
        >
          <el-icon :size="30">
            <ArrowLeftBold />
          </el-icon>
        </div>
        <div class="btc" @mousedown="toptz('STOP')">
          <el-icon :size="50">
            <RefreshRight />
          </el-icon>
        </div>
      </div>
      <div class="zoom" v-if="isopen">
        <div
          class="zoombtn"
          @mousedown="toptz('ZOOM_IN')"
          @mouseup="toptz('STOP')"
        >
          <el-icon :size="20">
            <ZoomIn />
          </el-icon>
        </div>
        <div
          class="zoombtn"
          @mousedown="toptz('ZOOM_OUT')"
          @mouseup="toptz('STOP')"
        >
          <el-icon :size="20">
            <ZoomOut />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="list-yz" v-if="state.ylist.length > 0">
      <div
        class="listbtn"
        :class="{ active: currentPoint.value == item.value }"
        @click="setYzd(item)"
        v-for="item in state.ylist"
        :key="item.value"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { handlecameracontrol } from "@/api/videoplan.js";
const props = defineProps({
  did: {
    type: Object,
    default: () => ({}),
  },
});

const state = reactive({
  visible: false,
  yzwv: null,
  ylist: [
    {
      label: "预制点1",
      value: "1",
    },
    {
      label: "预制点2",
      value: "2",
    },
    {
      label: "预制点3",
      value: "3",
    },
    {
      label: "预制点4",
      value: "4",
    },
  ],
});

watch(
  () => props.did,
  (newVal) => {
    if (newVal) {
      //getList();
    }
  },
  { immediate: true }
);

const getList = () => {
  // useApi
  //   .post("/api/common/handlecameracontrol", {
  //     deviceId: props.did,
  //   })
  //   .then((res) => {
  //     state.ylist = [...(res.data.eventInfoList || [])];
  //   });
};
const toptz = (cmd, yzw) => {
  if (cmd == "STOP") {
    // useApi.post("/api/common/handlecameracontrol", {
    //   action: 1,
    //   cameraId: props.did,
    //   deviceId: props.did,
    //   command: "LEFT",
    // });
    handlecameracontrol({
      action: 1,
      cameraIndexCode: props.did.tag,
      // deviceId: props.did,
      command: "LEFT",
    });
  } else if (cmd != "GOTO_PRESET") {
    // useApi.post("/api/common/handlecameracontrol", {
    //   action: 0,
    //   cameraId: props.did,
    //   deviceId: props.did,
    //   command: cmd,
    // });
    handlecameracontrol({
      action: 0,
      cameraIndexCode: props.did.tag,
      // deviceId: props.did,
      command: cmd,
    });
  } else {
    handlecameracontrol({
      action: 0,
      cameraIndexCode: props.did.tag,
      // deviceId: props.did,
      command: "GOTO_PRESET",
      presetIndex: yzw,
    });
  }
};
let currentPoint = ref({});
const setYzd = (item) => {
  currentPoint.value = item;
  toptz("GOTO_PRESET", item.value);
};

let isopen = ref(false);

const toggle = () => {
  isopen.value = !isopen.value;
};
</script>

<style lang="scss" scoped>
.pc {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  min-height: 38px;
  // max-height: 288px;

  position: relative;
}
.yzw {
  display: flex;
  justify-content: space-between;
  span {
    margin-top: 8px;
  }
}
.openpanel {
  width: 100%;
  height: 38px;
  padding: 0 25px 0 33px;
  background: rgba(142, 191, 255, 0.32);
  text-align: center;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #2263bf;
  cursor: pointer;
  .icon-title {
    margin-left: 10px;
    transform: rotate(-90deg);
    &.active {
      transform: rotate(90deg);
    }
  }
}
.zoom {
  width: 60%;
  margin-top: 0px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px 20px 10px;
  .zoombtn {
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: rgba(142, 191, 255, 0.72);
    border-radius: 8px;
    border: 1px solid rgba(44, 132, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    &:hover {
      color: #2263bf !important;
    }
  }
}
.ptz {
  margin-top: 10px;
  margin-left: 10px;
  width: 200px;
  height: 200px;
  position: relative;
  .yuan {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 196px;
    height: 196px;
    border-radius: 50%;
    background: rgba(142, 191, 255, 0.3);
    border: 1px solid rgba(44, 132, 255, 0.3);
    // background: linear-gradient(134deg, #e9effb 0%, #fbfcff 100%);
    // box-shadow: 3px 3px 16px 0px rgba(159, 177, 206, 0.7),
    //   -4px -3px 10px 0px #ffffff;
  }
  .xyuan {
    position: absolute;
    left: 58px;
    top: 58px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(97, 117, 200, 0.5);
    color: #2263bf;
  }
  .btc {
    position: absolute;
    left: 75px;
    top: 75px;
    cursor: pointer;
    color: #2263bf;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btleft {
    position: absolute;
    left: 10px;
    top: 78px;
    cursor: pointer;
    color: #ffffff;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .bttop {
    position: absolute;
    left: 78px;
    top: 10px;
    transform: rotate(90deg);
    cursor: pointer;
    color: #ffffff;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btright {
    position: absolute;
    right: 10px;
    top: 78px;
    transform: rotate(180deg);
    cursor: pointer;
    color: #ffffff;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btbottom {
    position: absolute;
    bottom: 0px;
    left: 81px;
    transform: rotate(270deg);
    cursor: pointer;
    color: #ffffff;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btleftt {
    position: absolute;
    left: 30px;
    top: 30px;
    transform: rotate(45deg);
    cursor: pointer;
    color: #ffffff;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btleftb {
    position: absolute;
    left: 30px;
    bottom: 20px;
    transform: rotate(-45deg);
    cursor: pointer;
    color: #ffffff;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btrightt {
    position: absolute;
    right: 30px;
    top: 30px;
    transform: rotate(135deg);
    cursor: pointer;
    color: #ffffff;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
  .btrightb {
    position: absolute;
    right: 30px;
    bottom: 20px;
    transform: rotate(-135deg);
    cursor: pointer;
    color: #ffffff;
    .el-icon {
      svg {
        font-size: unset;
      }
    }
  }
}
.el-icon {
  &:hover {
    color: #2263bf !important;
  }
}

.list-yz {
  width: 90px;
  position: absolute;
  right: 35px;
  top: 80px;
  overflow: auto;
  display: flex;
  align-items: top;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
  cursor: pointer;
  .listbtn {
    width: 100%;
    height: 34px;
    line-height: 34px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 12px;
    color: #2263bf;
    text-align: center;
    background: rgba(142, 191, 255, 0.32);
    border-radius: 6px;
    &.active {
      background: #2263bf;
      font-size: 12px;
      color: #ffffff;
    }
  }
}
</style>
